<template>
  <div style="padding: 15px">
    <sf-table ref="tableRef" v-bind="tableConfig">
    </sf-table>

  </div>
</template>

<script setup>
import {ref} from 'vue'
import sfTable from '/components/table/index.vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const tableRef = ref(null)

const tableConfig = {
  toolBar: [{
    label: '新增',
    click: () => {
      alert('点击新增')
    }
  }, {
    label: '刷新',
    click: () => {
      tableRef.value.refeshTable()
    }
  }],
  table: {
    initParams:{
      name:'234'
    },
    columns: [
      {
        type: 'index',
        fixed: true,
        width: '55',
        label: '序号'
      }, {
        sortable: true,
        prop: 'name',
        label: '银行名称',
        search: true,
        width: '180',
        render(row) {
          return row.code + '-' + row.name
        }
      }, {
        sortable: true,
        prop: 'type',
        label: '协议类型',
        search: true,
        width: '180'
      }, {
        prop: 'port',
        label: '端口'
      }, {
        label: '操作',
        fixed: 'right',
        width: '250',
        render(row) {
          const btn = [{
            type: 'el-button',
            label: '启动',
            props: {
              link: true,
              type: 'primary',
              size: 'small',
            },
            click() {
              alert('点击启动')
            }
          }]
          if (row.status === '1') {
            btn.push({
              type: 'el-button',
              label: '停止',
              props: {
                link: true,
                type: 'primary',
                size: 'small',
              },
              click() {
                ElMessageBox.confirm('是否确定停止', '提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    }
                ).then(() => {
                  alert('确定停止')
                })
              }
            })
          }
          return btn
        }
      }
    ],
    url:  "/bank/list"
  },
}
</script>
